<div class="header">
    <div class="header-top">
        <div class="wrap">
            <div class="top-menu">
                <ul>
                    <li><a href="/">推荐</a></li>
                </ul>
            </div>
            <% if(!locals.user) { %>
            <div class="top-menu num">
                <ul>
                    <li><a href="/" data-toggle="modal" data-target="#loginModal">登录</a></li>
                    <li><a href="/about" data-toggle="modal" data-target="#registerModal">注册</a>
                    </li>
                </ul>
            </div>
            <% }else{ %>
            <div class="top-menu num">
                <ul>
                    <li class="dropdown"><a href="javascript:void(0)" class="dropdown-toggle"
                                            data-toggle="dropdown"><%= user.username %>
                            <b
                                    class="caret"></b></a>
                        <ul class="dropdown-menu" style="min-width: 120%;text-align: center">
                            <li style="margin-right: 0;width: 100%;"><a href="javascript:void(0)"
                                                                        style="display:block;">个人资料</a></li>
                            <li class="divider" style="display: block;margin-right: 0;"></li>
                            <li style="margin-right: 0;width: 100%"><a id="signout" href="javascript:void(0)"
                                                                       style="display: block;margin-right: 0;">登出</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <% } %>
            <div class="clearfix"></div>
        </div>
    </div>

    <div class="header-bottom">
        <div class="logo text-center">
            <a href="/"><img src="/images/logo.jpg" alt=""/></a>
        </div>
        <div class="navigation">
            <nav class="navbar navbar-default" role="navigation">
                <div class="wrap">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse"
                                data-target="#bs-example-navbar-collapse-1">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>

                    </div>
                    <!--/.navbar-header-->

                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="/">推荐</a></li>
                            <div class="clearfix"></div>
                        </ul>
                        <div class="search">
                            <!-- start search-->
                            <div class="search-box">
                                <div id="sb-search" class="sb-search">
                                    <form>
                                        <input class="sb-search-input" placeholder="Enter your search term..."
                                               type="search" name="search" id="search">
                                        <input class="sb-search-submit" type="submit" value="">
                                        <span class="sb-icon-search"> </span>
                                    </form>
                                </div>
                            </div>
                            <!-- search-scripts -->
                            <script src="/javascripts/classie.js"></script>
                            <script src="/javascripts/uisearch.js"></script>
                            <script>
                                new UISearch(document.getElementById('sb-search'));
                            </script>
                            <!-- //search-scripts -->
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <!--/.navbar-collapse-->
                <!--/.navbar-->
            </nav>
        </div>
    </div>
</div>
<!--<div class="wrap">-->
<!--<div class="move-text">-->
<!--<div class="breaking_news">-->
<!--<h2>Breaking News</h2>-->
<!--</div>-->
<!--<div class="marquee">-->
<!--<div class="marquee1"><a class="breaking" href="single.ejs">>>The standard chunk of Lorem Ipsum used since-->
<!--the 1500s is reproduced..</a></div>-->
<!--<div class="marquee2"><a class="breaking" href="single.ejs">>>At vero eos et accusamus et iusto qui-->
<!--blanditiis praesentium voluptatum deleniti atque..</a></div>-->
<!--<div class="clearfix"></div>-->
<!--</div>-->
<!--<div class="clearfix"></div>-->
<!--<script type="text/javascript" src="/javascripts/jquery.marquee.min.js"></script>-->
<!--<script>-->
<!--$('.marquee').marquee({pauseOnHover: true});-->
<!--//@ sourceURL=pen.js-->
<!--</script>-->
<!--</div>-->
<!--</div>-->

<div class="modal fade" id="loginModal" tabindex="-1" role="dialog"
     aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h5 class="modal-title" id="exampleModalLabel">登录</h5>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group"
                         style="width: 60%;margin: 10px auto">
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon1">帐号:</span>
                            <input type="text" id="user" name="user"
                                   class="form-control"
                                   aria-describedby="basic-addon1">
                        </div>
                    </div>
                    <div class="form-group"
                         style="width: 60%;margin: 10px auto">
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon1">密码:</span>
                            <input type="password" id="password" name="password"
                                   class="form-control"
                                   aria-describedby="basic-addon1">
                        </div>
                    </div>
                    <div class="form-group" id="login_sign_div"
                         style="width: 60%;margin: 10px auto;display: none">
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon1">提示:</span>
                            <input type="text" id="login_sign"
                                   name="login_sign" class="form-control"
                                   aria-describedby="basic-addon1">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" id="login" name="login"
                        class="btn btn-primary" data-dismiss="alert">登录
                </button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="registerModal" tabindex="-1" role="dialog"
     aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h5 class="modal-title" id="exampleModalLabel">注册</h5>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group"
                         style="width: 80%;margin: 10px auto">
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon1">邮箱:</span>
                            <input type="text" id="email" name="email"
                                   class="form-control"
                                   placeholder="邮箱将作为登录用户名，一个邮箱只能注册一个帐号"
                                   aria-describedby="basic-addon1">
                        </div>
                    </div>
                    <div class="form-group"
                         style="width: 80%;margin: 10px auto">
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon1">密码:</span>
                            <input type="password" id="password_res"
                                   name="password_res" class="form-control"
                                   aria-describedby="basic-addon1">
                        </div>
                    </div>
                    <div class="form-group"
                         style="width: 80%;margin: 10px auto">
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon1">再次输入密码:</span>
                            <input type="password" id="password_res_again"
                                   name="password_res_again"
                                   class="form-control"
                                   aria-describedby="basic-addon1">
                        </div>
                    </div>
                    <div class="form-group"
                         style="width: 80%;margin: 10px auto">
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon1">请选择喜欢的类别:</span>
                            <select name="preference" id="preference">
                                <option value="财经">财经</option>
                                <option value="国际">国际</option>
                                <option value="科技">科技</option>
                                <option value="体育">体育</option>
                                <option value="娱乐">娱乐</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group" id="register_sign_div"
                         style="width: 80%;margin: 10px auto;display: none">
                        <div class="input-group">
                            <span class="input-group-addon" id="basic-addon1">提示:</span>
                            <input type="text" id="register_sign"
                                   name="register_sign" class="form-control"
                                   aria-describedby="basic-addon1">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" id="register" name="register"
                        class="btn btn-primary" data-dismiss="alert">注册
                </button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        $('#registerModal').modal({show: false});
        $('#loginModal').modal({show: false});
    })
</script>